<template>
	<view class="repair" v-if="details">
		<view class="header-center" style="padding-bottom: 10px;">
			<view class="hender_in">
				<view class="polling">
					<view class="polling_name">
						{{examinData.house_type==1 || examinData.house_type==null?examinData.renovate_district +
					                        '-' +
					                        examinData.renovate_floor +
					                        '-' +
					                        examinData.renovate_unit +
					                        '-' +
					                        examinData.renovate_house_number
					                        :examinData.house_type==2?examinData.pubilc_name:examinData.house_type==3?examinData.roomInfo:""}}
					</view>
				</view>
				<view style="float: right;margin-top: -100rpx;margin-right: 30rpx;">
					<view class="notice-typePu" v-if="this.ruleForm.check_type == 1">
						巡检
					</view>
					<view class="notice-type" v-if="this.ruleForm.check_type == 2">
						验收
					</view>
				</view>
			</view>
		</view>


		<view style="padding:6px 0px 0;padding-bottom: 0;">
			<view style="background: #FFFFFF;border-radius: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);">
				<view style="text-align: center;">
					<view
						style="font-weight: bold;padding:20rpx 50rpx 40rpx;align-items: center;justify-content: center;">
						<view class="polling_in" style="color: #000000;margin-bottom: 15px;">
							<view style="color:#999">检查人：</view>
							<view>

								<span v-if="examinData.dept_name">{{examinData.dept_name+"~"}}</span>
								<span v-if="examinData.post_name">{{examinData.post_name+"~"}}</span>
								<span v-if="examinData.post_name">{{examinData.user_name}}</span>
							</view>
						</view>
						<view class="polling_in">
							<view style="color:#999">记录时间：</view>
							<view style="color: #000;">{{examinData.renovateTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>





		<view class="details_add">
			<view class="repair-cont">
				<view>
					<view class="detail-name" style="color: #000;font-size: 16px;font-weight: bold;">检查信息：</view>

					<view class="u-p-15 u-p-l-36 u-p-r-36" style="background: #fff;" v-for="(item,index) in patrolList">

						<view style="">
							<view style="color:#333333;margin-top:-10rpx;margin-bottom: 10rpx;line-height:2em">
								<view class="detail-name" style="color: #999;">
									<span style="margin-left: 10px;">
										<span style="font-size: 15px;font-weight: 600;color: #000;">{{index+1}}:</span>
										<span v-if="item.check_result==1" style="color: #19BE6B;margin-left: 10px;
								margin-right: 5px;">[合格]</span>
										<span v-if="item.check_result==2" style="color: #FCBD71;margin-left: 10px;
								margin-right: 5px;">[基本合格]</span>
										<span v-if="item.check_result==3" style="color: #FF0000;margin-left: 10px;
								margin-right: 5px;">[不合格]</span>
										<span style="color: #000000;">{{item.check_target}}</span>
									</span>
								</view>
							</view>
						</view>
						<view class="detail-li" style="margin-bottom: 15px;">
							<view class="detail-name">检查备注：</view>
							<view>{{item.check_remarks}}</view>
						</view>
						<view class="detail-li" v-if="item.check_images != null">
							<view v-for="(item,index) in item.check_images.split('@')">
								<image style="width: 100px;height: 100px;margin-left: 10px;"
									@click="preview(item,index,item.check_images.split('@'))" :src="item" mode="">
								</image>
							</view>
						</view>



						<view style="border: 1px solid rgb(220, 223, 230);margin-top: 22px;"></view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				current: 0,
				//保存请求参数
				ruleForm: {
					renovate_id: null, //装修主键id
					check_data: [], //选择参数
					check_user_id: null, //当前用户id
					room_id: null, //装修房间id
					pro_id: null, //项目id
				},
				datalist: [],
				img: [],

				examinData: {},
				patrolList: [],

				pageInfo: {
					pageIndex: 1,
					pageSize: 10
				},
				nextPage: false, //是否有下一页
				form: {
					check_images: '',
				},
				//保存下标
				indexS: null,
				details: false,

			}
		},
		//处理页面跳转参数
		onLoad(option) {
			//保存页面跳转携带的参数
			this.ruleForm.check_user_id = option.user_id;
			this.ruleForm.room_id = option.room_id;
			this.ruleForm.pro_id = option.project_id;
			this.ruleForm.renovate_id = option.renovate_id;
			this.ruleForm.check_type = option.check_type;
		},
		onShow() {
			this.requestData()
		},
		onReady() {
			if (this.nextPage) {
				this.pageInfo.pageIndex = this.pageInfo.pageIndex + 1;
			}
		},
		methods: {


			async requestData() {
				uni.showLoading({
					title: '加载中'
				});
				let res = this.$request.api.renovatRecords({
					check_type: this.ruleForm.check_type,
					renovate_id: this.ruleForm.renovate_id
				}).then(res => {
					this.examinData = res.data.data; //获取列表数据
					console.log(this.examinData)
					this.patrolList = res.data.data.checkRecordList;
					console.log(this.patrolList)
					this.details=true;
					uni.hideLoading();
				})
			},








			// 图片预览
			preview(id) {
				uni.previewImage({
					urls: [this.ruleForm.check_images],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//提交


			//处理复选框value值
			radioChange(evt) {
				if (this.indexS === null) {
					this.indexS = 0;
				}
				if (evt.target.value === null) {
					this.ruleForm.check_data[this.indexS].check_result = 1;
				} else {
					this.ruleForm.check_data[this.indexS].check_result = evt.target.value;
				}
			},

			imageBig(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			//处理下标
			text(index) {
				this.indexS = index + 1;
			}
		}
	};
</script>

<style lang="scss">
	.scrap_wrap {
		width: 100%;
		height: 100%;

		.img-upload {
			padding-top: 32rpx;
			display: flex;

			.img-list {
				width: 126rpx;
				height: 126rpx;
				margin-right: 28rpx;
				position: relative;

				.process-img {
					width: 126rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.close {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
				}
			}

			.img-up {
				width: 126rpx;
				height: 126rpx;
				border-radius: 8rpx;
				border: 1rpx dashed #ccc;
				background-size: 34rpx 34rpx;
			}

			.video-up {
				width: 126rpx;
				height: 126rpx;
				border-radius: 8rpx;
				border: 1rpx dashed #ccc;
				//background: url(../../static/workPress/upload_video_icon.png) center center no-repeat;
				background-size: 34rpx 34rpx;
			}
		}

		.detail-img-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 0 20rpx 0;

			.detail-img {
				width: 126rpx;
				height: 126rpx;
				border-radius: 8rpx;
				margin-right: 30rpx;
				margin-top: 20rpx;
			}
		}
	}

	.interval_center_input {
		height: 100px;
		border: 1px solid #DDDDDD;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.repair {

		// height: 100vh;
		// min-height: 100vh;
		.cardCon {
			/* #ifdef APP-PLUS */
			padding-top: 104rpx;
			/* #endif */
			position: relative;


		}
	}

	.polling_in {
		display: flex;
		margin-top: 20rpx;
		color: #999999;
	}

	.header-center {
		width: 100%;
		margin: 0 auto;
		// height: 250rpx;
		padding-left: 20rpx;
		padding-top: 64rpx;
		background-color: #FFFFFF;
		padding-bottom: 36rpx;
	}

	.hender_in {
		width: 95%;
		margin: 0 auto;
	}

	.polling {
		display: flex;
		font-size: 18px;
		text-align: center;
	}

	.polling_name {
		// color: #000000;
		font-weight: bold;
		width: 100%;
	}

	.notice-typePu {
		width: 110rpx;
		height: 44rpx;
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		border-radius: 16rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 44rpx;
	}

	.notice-type {
		width: 110rpx;
		height: 44rpx;
		background: linear-gradient(90deg, #007aff 0%, #007aff 100%);
		border-radius: 16rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 44rpx;
	}

	.notice-typePuTong {
		width: 64px;
		height: 44rpx;
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 46rpx;
	}

	.details_add {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		// padding-bottom: 15px;
	}

	.repair-cont {
		width: 100%;
		margin: 0 auto;
		padding: 20rpx 40rpx 10rpx 40rpx;
		background: #ffffff;

		.detail-li {
			display: flex;
			margin: 0 0 14rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.detail-name {
				width: 154rpx;
				font-weight: 500;
				color: grey;
				// font-weight: bold;
			}

		}

		// .detail-name1 {
		// 	width: 180rpx;
		// 	line-height: 44rpx;
		// 	font-weight: 500;
		// 	color: grey;
		// 	// font-weight: bold;
		// }
		.detail-text {
			width: 510rpx;
			font-weight: 400;

			.detail-img-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin: 0 0 20rpx 0;

				.detail-img {
					width: 126rpx;
					height: 126rpx;
					border-radius: 8rpx;
					margin-right: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.title {
			color: #333333;
			font-weight: bold;
			width: 315px;
			margin-top: 12rpx;
		}

		.input {
			width: 400rpx;
			text-align: left;
			line-height: 200%;
			/* margin-left: 300rpx; */
		}

		.tab-type {
			width: 254rpx;
			height: 35px;
			border-radius: 6rpx 0rpx 0rpx 6rpx;
			border: 2rpx solid #578ef0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.shi {
			width: 126rpx;
			height: 60rpx;
			background: #4a90e2;
			text-align: center;
			line-height: 60rpx;
			color: #ffffff;
		}

		.fou {
			width: 126rpx;
			height: 60rpx;
			background: #ffffff;
			text-align: center;
			line-height: 60rpx;
			color: #4a90e2;
		}
	}
</style>